<template>
  <div class="balanceInquiry boxSize">
    <div class="search-content">
      <el-form :model="formInline" class="balanceInquiry-content" label-width="80px">
        <el-col :span="8">
          <el-form-item label="账号">
            <el-select v-model="formInline.operNo" clearable placeholder="请选择账号">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div class="common serach-btn">
          <el-button type="primary" @click="search">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="list"
        stripe
        style="width: 100%">
        <el-table-column
          prop="name"
          label="企业名称"
          width="220">
        </el-table-column>
        <el-table-column
          prop="accNo"
          label="账号">
        </el-table-column>
        <el-table-column
          prop="balance"
          label="余额"
          width="220">
        </el-table-column>
        <el-table-column
          prop="cryType"
          label="币种"
          width="220">
          <template slot-scope="scope">
            {{currency[scope.row.cryType]}}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { accInfoQuery } from '@/libs/api';
import Constants from '@/libs/constants';

export default {
  data () {
    return {
      currency: Constants.currencyMap,
      formInline: {
        operNo: ''
      },
      options: [
        { value: '0433410000111578', label: '0433410000111578' },
        { value: '0433410000111602', label: '0433410000111602' },
        { value: '0433410000111592', label: '0433410000111592' },
        { value: '0433410000111530', label: '0433410000111530' },
        { value: '0433410000111561', label: '0433410000111561' },
        { value: '0433410000111554', label: '0433410000111554' }
      ],
      resources: [],
      list: []
    }
  },
  methods: {
    search () {
      if (this.resources.length) {
        this.filterList()
        return
      }
      let params = {
        cstNo: this.formInline.operNo,
        hostNo: '043101008690',
        operType: '00',
        cryDir: '',
        type: 1
      }
      accInfoQuery(params).then(res => {
        this.resources = res.accList
        if (this.formInline.operNo) {
          this.filterList()
        } else {
          this.list = res.accList
        }
      })
    },
    filterList () {
      if (!this.formInline.operNo) {
        return false
      }
      this.list = this.resources.filter((item) => {
        return item.accNo === this.formInline.operNo
      })
    }
  }
}
</script>

<style scoped lang = 'less'>
.balanceInquiry {
  width: 100%;
  height: 100%;
  .search-content {
    .balanceInquiry-content {
      /*display: flex;*/
      flex-direction: row;
      flex-wrap: wrap;
      .common {
        width: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        padding-left: 5px;
        span {
          display: inline-block;
          flex: 1;
        }
        .el-input {
          width: 60%;
          .el-input__inner {
            height: 30px;
            line-height: 30px;
          }
        }
      }
      .serach-btn {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
